.grid_draft {
  display: grid;
  grid-template-columns: repeat(1, minmax(0px, 1fr));

  .grid_child {
    // animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1; // 移入
    border: 1px dashed #ccc;
    background-color: aliceblue;
    position: relative;
  }
  .child_ghost {
    //border: 2px dashed #4395ff !important;
    //opacity: 0.3;
  }

  .child_chosen {
    border: 2px dashed #4395ff !important;
  }

  .child_drag {
    //opacity: 0.3;
    border: 3px dashed #4395ff !important;
    transform: scale(1.1);
  }

  .drag_tool{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #4395ff;

    i{
      &:hover{
        color: white
      }
    }
  }


  div[class~='active'] {
    border: 2px dashed #4395ff;
    border-top: 3px solid #4395ff;
    border-right: 2px solid #4395ff;
    background-color: #cde3ff;
  }

  :global(.spare_dragin){
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 56px solid lightskyblue;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  @for $i from 1 through 24{
    &:global(.default-span-#{$i}>.spare_dragin) {
      grid-column: span #{$i} / span 1;
    }
  }
}

